<template>
	<view class="wrap" :style="{ minHeight: screenHeight + 'px' }">
		<view class="content">
			<view class="name-wrap">
				<view class="name">姓名</view>
				<input v-model="name" placeholder="请输入真实姓名" />
			</view>
			<view class="qcode">
				<view class="tit">请上传收款二维码</view>
				<image class="qcodeImg" :src="fileUrl" v-if="fileUrl != ''"></image>
				<image :src=" iconurl + '/static/index/add.png'" mode="" @click="file" ></image>
				<view class="txt">只支持.jpg格式</view>
			</view>
			<view class="confirm">
				<image :src=" iconurl + '/static/user/check.png'" v-if="!confirm" @click="confirms"></image>
				<image :src=" iconurl + '/static/user/checks.png'" v-if="confirm" @click="confirms"></image>
				请确认是否使用该账户
			</view>
		</view>

		<view class="btn" @click="submit">下一步</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			screenHeight: '',
			info: {},
			confirm: true,
			name: '',
			fileUrl: '' //上传后图片
			iconurl:this.$configs.urls
		};
	},
	onLoad(option) {
		let infodata = uni.getStorageSync("infodata")
		if (infodata) {
			this.name = infodata.name;
			this.fileUrl = infodata.fileUrl;
		}
		uni.getSystemInfo({
			success: res => {
				this.screenHeight = res.windowHeight;
			}
		});
	},
	methods: {
		confirms() {
			this.confirm = !this.confirm;
		},
		submit() {
			if (!this.name) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return;
			}
			if (!this.fileUrl) {
				uni.showToast({
					title: '请上传收款码',
					icon: 'none'
				});
				return;
			}
			if (!this.confirm) {
				uni.showToast({
					title: '请确认使用该账户',
					icon: 'none'
				});
				return;
			}
			let infodata = {
				name:this.name,
				fileUrl:this.fileUrl,
				confirm:this.confirm
			}
			uni.setStorageSync("infodata",infodata)
			uni.navigateTo({
				url:"/pages/user/wallet/tixian"
			})
		},
		file() {
			var that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: res => {
					let srcImg = res.tempFilePaths[0];
					uni.uploadFile({
						url: that.$configs.APIHOST + that.$api.user.file,
						filePath: srcImg,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('USERINFO')
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							if (data.code == 0) {
								that.fileUrl = data.data.url;
							} else if (data.code == 406) {
								uni.showToast({
									title: '请登录',
									duration: 1000,
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: res.msg,
									duration: 1000,
									icon: 'none'
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.wrap {
	background: #f8f8f8;
	padding: 20rpx;
}
.content {
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	border-radius: 10rpx;
	padding: 0 19rpx;
}
.name-wrap {
	display: flex;
	border-bottom: 1rpx solid #ccc;
	padding: 22rpx 0;
	.name {
		line-height: 50rpx;
		color: #333;
		font-size: 30rpx;
		width: 170rpx;
	}
}
.qcode {
	color: #333;
	padding-top: 34rpx;
	.tit {
		font-size: 30rpx;
		line-height: 42rpx;
		padding-bottom: 22rpx;
	}
	image {
		width: 128rpx;
		height: 128rpx;
		margin-bottom: 9rpx;
	}
	.qcodeImg {
		margin-right: 10rpx;
	}
	.txt {
		color: #999;
		font-size: 20rpx;
		line-height: 28rpx;
	}
}

.confirm {
	font-size: 28rpx;
	color: #333;
	padding-bottom: 25rpx;
	padding-top: 20rpx;
	image {
		width: 42rpx;
		height: 42rpx;
		vertical-align: middle;
		margin-right: 14rpx;
	}
}
.btn {
	width: 710rpx;
	height: 88rpx;
	background: linear-gradient(90deg, #6ce281 0%, #33d29c 100%);
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 300rpx auto;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
</style>
